<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        width="200px"
        style="
          background-color: rgb(238, 241, 246);
          box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
        "
      >
        <el-menu
        :default-active="route.path"
          class="el-menu-vertical"
          style="min-height: 100vh; overflow-x: hidden"
          router
        >
          <div style="height: 60px; line-height: 60px; text-align: center">
            <img
              src="../../assets/logo.png"
              alt=""
              style="width: 20px; position: relative; top: 5px"
            />
            <b style="color: rgb(0, 0, 0); margin-left: 5px">后台管理系统</b>
          </div>
          <el-menu-item index="/admin/home">
            <el-icon><House /></el-icon>
            <span>控制台</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/admin/banner">
              <template #title>
                <el-icon><Star /></el-icon>
                <span>轮播图管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Star /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/userlist">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户列表</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><ShoppingCart /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/admin/community">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商品列表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/admin/orderlist">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>订单列表</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="666" disabled>
            <span>@author: 杜勇</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="border-bottom: 1px solid #ccc">
          <div style="line-height: 60px; display: flex">
            <div style="flex: 1">
              <el-breadcrumb
                separator="/"
                style="display: inline-block; margin-left: 10px"
              >
                <el-breadcrumb-item :to="{ path: '/admin/home' }"
                  >控制台</el-breadcrumb-item
                >
              </el-breadcrumb>
            </div>
            <el-dropdown style="width: 100px; cursor: pointer">
              <span class="el-dropdown-link">
                <el-avatar
                  shape="square"
                  :size="30"
                  style="
                    border-radius: 50%;
                    position: relative;
                    top: 10px;
                    right: 5px;
                  "
                  :src="$apiImg+SysUserDetail.avatarUrl"
                ></el-avatar>
                <span>{{ SysUserDetail.nickname }}</span
                ><el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {toRefs,reactive} from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { SysGetDetailApi } from '@/api/system/sysuser'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      SysUserDetail:{}
    })
    const SysuInfo = store.state.SysuInfo.userInfo
    const getSysUser = () =>{
      SysGetDetailApi({username: SysuInfo.username}).then((res)=>{
        if(res){
          data.SysUserDetail=res.data
        }
      })
    }
    const loginOut = () => {
          localStorage.removeItem('SysLoginData')
          store.commit('setSysUserInfo', {})
          ElMessage({
            message: '退出成功',
            type: 'success',
            duration: 2000
          })
          router.go(0)
        }
        getSysUser()
    return { ...toRefs(data), router, loginOut, route }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.el-dropdown-link:focus {
  outline: 0;
}
</style>